<template>
  <div>
    <div>
      {{ computedEnName }}
    </div>
    <div>
      {{ computedEnName }}
    </div>
    <div>
      {{ computedEnName }}
    </div>
    <div>
      <button @click="handleChangeName">修改名字</button>
    </div>
    <div style="width: 100%; background: black;height: 1px;"></div>
    <div>
      <div>
        {{ methodEnName() }}
      </div>
      <div>
        {{ methodEnName() }}
      </div>
      <div>
        {{ methodEnName() }}
      </div>
     
    </div>
    {{ name }} <br>
    {{ age }}
    <div style="border: 1px solid red;margin-bottom: 10px; width: fit-content;padding: 20px;">
  <div>
    reactive
  </div>
    <div>
      姓名<input type="text" v-model="objData.name">
    </div>
    <div>
      年龄<input type="text" v-model="objData.age">
    </div>
    <div>
      <button @click="handleChangeUserInfo">修改用户信息</button>
    </div>
  </div>

    <div style="border: 1px solid red;margin-bottom: 10px;width: fit-content;padding: 20px;">
      <div>
        ref
      </div>
      <div>
        姓名:<input type="text" v-model="refObjData.name">
      </div>
      <div>
        年龄<input type="text" v-model="refObjData.age">
      </div>
      <div>
        <button @click="handleRefChangUserInfo">修改用户信息</button>
      </div>
  </div>
  </div>
 

    
</template>
<script setup lang="ts" name="test" >
import{ref,reactive, toRefs,toRef, computed} from "vue"

interface objDataInterface{
  name:string
  age:number
}
let objData=reactive<objDataInterface>({
  name:"迪迦奥特曼",
  age:18
})
let {name} = toRefs(objData)
let age = toRef(objData,"age")
console.log("name",name);
console.log("age",age);
//console.log("reactive:",objData)
/* let name=ref<string>("迪迦奥特曼")*/
// let age=ref<number>(18)
const handleChangeUserInfo=()=>{
  name.value = "春丽"
  age.value = 200
  //if(objData.name=="迪迦奥特曼"){
    //Object.assign(objData,{name:"泰罗奥特曼",age:20},{name:"赛文奥特曼"})
   // objData.name="泰罗奥特曼"
    //objData.age=20
  // }else{
  //   objData.name="迪迦奥特曼"
  //   objData.age=18
  // }
}
let refObjData=ref({
  name:"迪迦奥特曼",
  age:18
})
const handleRefChangUserInfo =()=>{
  if(refObjData.value.name=="迪迦奥特曼"){
    refObjData.value.name="泰罗奥特曼"
    refObjData.value.age=20
  }else{
    refObjData.value.name="迪迦奥特曼"
    refObjData.value.age=18
  }
}
let enName = ref("abc")
let computedEnName = computed({
  set(val:string){
    enName.value = val;

},
get(){
  console.log("计算属性")
  return enName.value.slice(0,1).toUpperCase()+enName.value.slice(1)
} 
})
const handleChangeName= ()=>{
  computedEnName.value = "qwe"
}
let methodEnName = ()=>{
  console.log("普通函数");
  return enName.value.slice(0,1).toUpperCase()+enName.value.slice(1)
}

</script>

<style scoped>
</style>
